<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>生产订单模板</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="produce-order" v-if="config!==null">
      <div class="produce-order-btns" style="margin-bottom: 5px;">
        <el-button size="medium" type="primary" @click="settingPageConfig">纸张配置</el-button>
        <el-button size="medium" type="primary" @click="saveConfig">保存模板</el-button>
      </div>
      <div class="produce-order-content">
        <order-template ref="orderTempl" v-if="config.pageSize!==null" :config="config">
        </order-template>
        <div v-else class="no-data">
          <div>请先去配置纸张的信息</div>
        </div>
      </div>
    </div>

    <el-dialog append-to-body title="纸张设置" :visible.sync="openDialog" top="10vh">
      <div class="dialog-templ">
        <template v-if="openDialog">
          <page-setting :config="config" @setting-success="toCloseDialog"></page-setting>
        </template>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/static/vue-drag-resize/vue-drag-resize.css",
    "/vueSystem/components/css/richEditor.css",
    "/vueSystem/components/css/formGroup.css",
    "/vueSystem/components/css/checkGroup.css",
    "/vueSystem/components/css/showTextarea.css",
    "./components/css/sysDragResize.css",
    "./css/orderInfoSettingDialog.css",
    "./css/orderInfoSetting.css",
    "./css/materialColorSettingDialog.css",
    "./css/materialColorSetting.css",
    "./css/materialSettingDialog.css",
    "./css/materialSetting.css",
    "./css/otherTableItem.css",
    "./css/dragTableSetting.css",
    "./css/pageSetting.css",
    "./css/orderTemplate.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/static/vue-drag-resize/index.js",
    "/static/vue/qrcode.min.js",
    "/vueSystem/directives/clickoutside.js",
    "/vueSystem/components/formGroup.js",
    "/vueSystem/components/checkGroup.js",
    "/vueSystem/components/showTextarea.js",
    "/vueSystem/models/baseModel.js"
  ]);
  importRichEditorFiles([
    "/vueSystem/components/richEditor.js"
  ]);

</script>

<script src="./models/produceOrderData.js"></script>
<script src="./models/materialColorData.js"></script>

<script src="./models/orderInfoConfig.js"></script>
<script src="./models/produceOrderTemplConfig.js"></script>
<script src="./models/materialColorConfig.js"></script>
<script src="./models/materialConfig.js"></script>
<script src="./models/dragConfig.js"></script>
<script src="./mixins/tableResizeMixin.js"></script>

<script src="./components/sysDragResize.js"></script>
<script src="./orderInfoSettingDialog.js"></script>
<script src="./orderInfoSetting.js"></script>
<script src="./materialColorSettingDialog.js"></script>
<script src="./materialColorSetting.js"></script>
<script src="./materialSettingDialog.js"></script>
<script src="./materialSetting.js"></script>
<script src="./otherTableItem.js"></script>
<script src="./dragTableSetting.js"></script>

<script src="./pageSetting.js"></script>
<script src="./orderTemplate.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        config: null,
        openDialog: false
      }
    },

    created: function () {
      var param = this.getParam();
      this.loading = true;
      var self = this;
      this.getConfig(param).then(function (config) {
        self.config = config;
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      getConfig: function (param) {
        if (param === null) {
          var defaultConfig = ProduceOrderTemplConfigModel.defaultConfig;
          var config = new ProduceOrderTemplConfigModel(defaultConfig);
          config.useDefault = true;
          return Promise.resolve(config);
        }

        var templId = param.templId;
        return ajaxRequest('createOrder/getTemplateById', {
          id: templId
        }).then(function (data) {
          var configData = data.temp_info;
          configData = JSON.parse(configData);
          var config = new ProduceOrderTemplConfigModel(configData);
          return config;
        });
      },

      settingPageConfig: function () {
        this.openDialog = true;
      },

      toCloseDialog: function () {
        this.openDialog = false;
      },

      saveConfig: function () {
        if (!this.checkValid()) {
          return;
        }

        var self = this;
        this.$prompt('请输入模板名称', '保存模板', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(function (option) {
          var value = option.value;
          if (value.trim() === '') {
            self.$message('请输入模板名称');
            return;
          }
          self.toSaveConfig(value);
        }).catch(function () {});
      },

      toSaveConfig: function (tempName) {
        var postData = this.$refs.orderTempl.getConfigPostData();
        this.loading = true;
        var self = this;
        ajaxRequest('createOrder/saveAsOrderTemplate', {
          type: 1,
          temp_name: tempName,
          table_source_line_total: "BST",
          temp_info: JSON.stringify(postData)
        }).then(function () {
          self.loading = false;
          self.$alert('模板保存成功', '信息', {
            callback: function () {
              self.jumpTo();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      checkValid: function () {
        var config = this.config;
        var code = config.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`produceOrder.error.${code}`);
          this.$alert(msg);
          return false;
        }
        return this.$refs.orderTempl.checkValid();
      },

      jumpTo: function () {
        var $parent = $(window.parent.document);
        if ($parent.is(document)) {
          return;
        }
        var htmlUrl = "bomBusiness/orderTemplate/index.html";
        var $jumpHtml = $parent.find(`#min_title_list li span[data-href='${htmlUrl}']`);
        if ($jumpHtml.length === 0) {
          $parent.find(`li a[data-href='${htmlUrl}']`)[0].click();
          this.closePage();
        } else {
          var $page = $jumpHtml.parents('li');
          var fun = window.parent.frames[$page.index()].refreshTable;
          if (fun !== undefined) {
            fun();
          }
          this.closePage();
          $page[0].click();
        }
      },

      closePage: function () {
        var $parent = $(window.parent.document);
        if ($parent.is(document)) {
          return;
        }
        var htmlUrl = "./bomBusiness/produceOrder/template.html";
        var $page = $parent.find(`#min_title_list li span[data-href^='${htmlUrl}']`);
        if ($page.length > 0) {
          $page.next().click();
        }
      },

      getParam: function () {
        var $parent = $(window.parent.document);
        if ($parent.is(document)) {
          return null;
        }

        var url = './bomBusiness/produceOrder/template.html';
        var $templEl = $parent.find(`li a[data-href^='${url}']`);
        if ($templEl.length === 0) {
          return null;
        }
        var param = $templEl.attr('param');
        if (SysUtil.isEmpty(param)) {
          return null;
        }
        return JSON.parse(param);
      }
    },

    components: {
      PageSetting: PageSetting,
      OrderTemplate: OrderTemplate
    }
  });

</script>

<style>
  .produce-order {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .produce-order .produce-order-content {
    position: relative;
    flex: 1;
    overflow: auto;
  }

  .dialog-templ {
    height: calc(80vh - 54px);
    overflow: auto;
  }

</style>

</html>
